<template>
  <el-container style="height: 100%; with: 100%; border-radius: 4px">
    <el-header>
      <span>测试平台</span>
      <span>
        <el-dropdown>
          <i
            class="el-icon-user-solid"
            style="
              margin-right: 15px;
              font-size: 25px;
              justify-content: flex-end;
              background-color: rgb(220, 228, 235);
            "
          ></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看详情</el-dropdown-item>
            <el-dropdown-item @click.native="logout()"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <span :class="{ username: show }">{{ username }}</span>
      </span>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu>
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-video-play"></i>自动化测试</template
            >
            <el-menu-item index="1-1" @click="testHtml('/caseManage')"
              >用例管理</el-menu-item
            >
            <el-menu-item index="1-2" @click="testHtml('/interfaceTest')"
              >用例执行</el-menu-item
            >
            <el-menu-item index="1-3" @click="testHtml('/caseTask')"
              >任务执行</el-menu-item
            >
            <el-menu-item index="1-4" @click="testHtml('/caseLog')"
              >用例执行记录</el-menu-item
            >
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-setting"></i>配置中心</template
            >
            <el-menu-item index="2-1" @click="testHtml('/projectName')"
              >项目配置</el-menu-item
            >
            <el-menu-item index="2-2" @click="testHtml('/dnsPartner')"
              >域名配置</el-menu-item
            >
            <el-menu-item index="2-3" @click="testHtml('/dbconfig')"
              >数据库配置</el-menu-item
            >
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i>工具管理</template
            >
            <el-menu-item index="3-1" @click="testHtml('/dbconfig')"
              >数据库配置</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
import apps from "@/api/interface";
import axios from "axios";
export default {
  data() {
    return {
      dialogVisible: false,
      username: "",
      show: false,
      jenkinslog: "",
    };
  },
  created() {
    this.getUserName();
  },
  methods: {
    // 页面导航测试
    testHtml(path) {
      apps.testHtml(path);
    },
    logout() {
      axios({
        method: "POST",
        url: "/logout/",
        withCredentials: true,
      }).then((res) => {
        if (res.data.code == 1) {
          this.$router.replace("/");
        }
      });
    },
    getUserName() {
      axios({
        method: "GET",
        url: "/getsession/user/",
        withCredentials: true,
      }).then((res) => {
        if (res.data.code == 1) {
          this.username = res.data.user;
        } else {
          this.$router.replace("/");
        }
      });
    },
    getjenkinslog() {
      this.$axios.get("/select_jenkins_log/").then((res) => {
        if (res.status === 200) {
          let a = res.data.result;
          this.jenkinslog = a.concat('<i class="el-icon-loading"></i>');
        }
      });
    },
    setTime() {
      //设置定时器
      this.clearTimeSet = setInterval(() => {
        this.getjenkinslog();
      }, 3000);
    },
    clearTime() {
      //清除定时器
      clearInterval(this.clearTimeSet);
    },
  },
  watch: {
    dialogVisible: {
      handler(newName, oldName) {
        console.log(">>>>>.", newName, oldName);
        if (newName == false && oldName == true) {
          this.clearTime();
        } else {
          this.setTime();
        }
      },
    },
    immediate: true,
  },
};
</script>
<style scoped>
.el-header {
  background-color: #5f6364;
  color: rgb(241, 238, 238);
  line-height: 60px;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  border-radius: 4px;
}
.el-menu {
  background-color: rgb(220, 228, 235);
}
.el-menu-item {
  background-color: rgb(244, 246, 247);
}

.el-aside {
  color: #333;
  background-color: rgb(220, 228, 235);
  display: block;
  position: absolute;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 70px;
  bottom: 30px;
  overflow-y: hidden;
  background-color: #f1f1f0;
}
.username {
  color: #3c3c3c;
  font-size: 14px;
  font-weight: 700;
}
.el-footer {
  background-color: #f6f8fc;
  color: #333;
  text-align: center;
  line-height: 30px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

pre {
  white-space: pre-wrap;
}
</style>
<style type='text/css'>
#testlog {
  font-size: 14px;
  line-height: 28px;
  border: #3c3c3c;
  height: 100%;
}
</style>

